<template>
    <div :style="{backgroundColor:movie.backgroundColor}" class="movie_detail_page" v-if="movie">
        <div class="detail_nav">
            <span><i class="el-icon-arrow-left left" @tap="back"></i></span>电影
        </div>
        <div class="movie_info_wrapper">
            <div class="movie_info_top">
                <div class="movie_poster">
                    <img :src="movie.img | filterImg" alt="">
                    <img src="@/assets/images/video.png" alt="">
                </div>
                <div class="movie_desc">
                    <div class="movie_cn_name">{{movie.nm}}</div>
                    <div class="movie_en_name">{{movie.enm}}</div>
                    <div class="movie_type">
                        <span class="movie_cat">{{movie.cat}}</span>
                        <span class="movie_tag">
                            <img v-if="movie.version.includes('3d')" src="@/assets/images/3d_icon.png" alt="">
                        </span>
                    </div>
                    <div class="movie_actors">{{movie.star}}</div>
                    <div class="movie_show_time"><span>{{movie.pubDesc}} / {{movie.dur}}分钟</span><span></span></div>
                    <div class="movie_check_btns">
                        <div class="movie_want_btn"><img src="@/assets/images/bs.png" alt=""><span>想看</span></div>
                        <div class="movie_watched_btn"><img src="@/assets/images/star.png" alt=""><span>看过</span></div>
                    </div>
                </div>
            </div>
        </div>
        <realTimeWord :movie="movie" ></realTimeWord>
        <movieTips :movie="movie"></movieTips>
        <briefIntroduction :movie="movie"></briefIntroduction>
    </div>
</template>
<script>
import realTimeWord from './realTimeWord.vue'
import movieTips from './movieTips.vue'
import briefIntroduction from './briefIntroduction.vue'
export default {
    data() {
        return {
            movie:''
        }
    },
    components:{
        realTimeWord, movieTips, briefIntroduction
    },
    mounted() {
        let id = this.$route.params.id
        this.axios.get(`/ajax/detailmovie?movieId=`+id+'&optimus_uuid=BA3BBBC0169011EA8982C5C04CAEBB8A79E47356DB2943AEB0DEBC6E39C100CF&optimus_risk_level=71&optimus_code=10')
            .then(res => {
                if (res.statusText === 'OK') {
                    this.movie = res.data.detailMovie
                }
                console.log( this.movie)
            })
    },
    methods : {
        back() {
            this.$router.back()
        }
    },
    filters: {
        filterImg(value) {
            return value.replace('w.h', '100.138')
        }
    }
}
</script>
<style scoped>
    .movie_detail_page{padding: 10px 15px 10px 15px;width: 100%;height: 100%;}

    .detail_nav{text-align: center;font-size: 15px;color: #fff;opacity: 0.6;position: relative;margin-bottom: 15px;}
    
    .detail_nav span{
        position: absolute;
        left: 0;
        top: 0;
    }
    .detail_nav span .el-icon-arrow-left{font-size: 16px; color: #fff;}

    /* 封面 */
    .movie_info_wrapper{margin-bottom: 25px}
    .movie_info_top{display: flex;flex-direction: row;justify-content: space-between;}
    .movie_poster{width: 100px;height: 138px;position: relative;margin-right: 10px;}
    .movie_poster img{width: 100%;height: 100%;}
    .movie_poster img:last-child{position: absolute;width: 30px;height: 30px;left: 0;bottom: 0;}
    /* 详情 */
    .movie_desc{flex-grow: 1;display: flex;flex-direction: column;justify-content: center;font-size: 12px;color: #fff;}
    .movie_cn_name{font-size: 20px;color: #fff;margin-bottom: 3px}
    .movie_en_name {opacity: .6;margin-bottom: 5px}
    .movie_cat{opacity: .6}
    .movie_tag{vertical-align: middle}
    .movie_tag img{height: 14px;margin-left: 5px}
    .movie_actors{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;opacity: .6;margin-bottom: 3px}
    .movie_show_time{opacity: .6;margin-bottom: 5px;}
    
    .movie_check_btns{display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
    .movie_check_btns div{flex-grow:1;text-align: center;padding: 5px 15px;color: #fff;background:rgba(255, 255, 255, 0.35);border-radius: 5px;vertical-align: middle}
    .movie_check_btns div:first-child{margin-right: 20px}
    .movie_check_btns div img{width: 14px;height: 14px;vertical-align: middle;margin-right: 3px}
    .movie_check_btns div span{display: inline-block;vertical-align: middle;line-height: 14px}

</style>